<html>
    <head>
        <title>alipay f2f example page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="//lib.baomitu.com/semantic-ui/2.2.6/semantic.min.css">
        <style>
            .body {
                font-family: "Lato,'Helvetica Neue',Arial,Helvetica,sans-serif"
            }

            .main {
                max-width: 1000px;
                margin: 72px auto;
            }

            .title {
                padding-bottom: 5px;
                border-bottom: 1px solid rgba(34,36,38,.15);
            }

            .top-message {
                position: fixed;
                top: 0;
                right: 0px;
                width: 100%;
                height: 60;
                z-index: 2;
                background: #fff;
                border-bottom: 1px solid rgba(34,36,38,.15);
                transform: translateY(-61px);
                transition: all 0.25s cubic-bezier(0.42, 0, 0, 1.8);
            }
            .top-message > div {
                max-width: 1000px;
                margin: 25 auto;
            }

            .top-message-display {
                transform: translateY(-11px);
                box-shadow: 0 1px 12px 0px #444444;
            }

            .qrcode {
                width: 150px;
                height: 150px;
            }

            @media screen and (max-width: 500px) {
                .main {
                    max-width: 1000px;
                    margin: 72px 15px;
                    text-align: center;
                }

                .top-message > div {
                    padding-left: 15px;
                }
            }
        </style>
    </head>

    <body>

        <div class="top-message">
            <div>
                <img width="25" height="25"
                     src="">
                <span style="font-size: 19;position: relative;top: -6px;left: 5px;"></span>
            </div>
        </div>
        <div class="main">
            <h2 class="title">欢迎您来支付</h2>

            <div class="ui green message" style="display:none"><p></p></div>
            <div class="ui action input">
                <div id="createInvoiceLoading"
                     class="ui active inverted dimmer"
                     style="border-radius: 0.28571429rem;display: none">
                    <div class="ui loader"></div>
                </div>
                <input type="text" id="invoiceAmount" value="  " placeholder="请输入金额">
                <button class="ui teal right icon button" id="createInvoiceButton"> 生成支付二维码</button>
            </div>

            <img class="qrcode" style="display: none" src="">
            <!-- <button onclick="returnResult()">模拟异步回调返回结果</button> -->
        </div>

        <script src="//lib.baomitu.com/zepto/1.2.0/zepto.min.js"></script>
        <script>
            window.onload = function () {
            let a = window.location.href;
            var arrhref = a.split("?id=");
            b = arrhref[1]
            console.log(arrhref[1])
            document.querySelector('[type="text"]').value = arrhref[1]
        }
            function returnResult(){
                $.post('/validInvoice',{},function(result){
                    console.log('ok!')
                    console.log(result)
                })
            }
            $('#createInvoiceButton').on("click", function () {

                displayMessageBar(false);

            	if($('#invoiceAmount').val() == "") {
		            displayMessage("请填写测试金额.");
		            return;
                }
            	$('#createInvoiceLoading').css("display", "");
               

                /* 请求创建订单 建议加上验证码 */
                $.post('/pay/createInvoice', { 
                    amount: $('#invoiceAmount').val()
                }, function(result){

	                $('#createInvoiceLoading').css("display", "none");

                    if(result.status == false) {
                        displayMessage(result.message);
                        return;
                    }
                    /* 将输入金额框隐藏 来显示二维码 */
                    $("div.ui.action.input").css("display", "none");

                    $("img.qrcode").attr("src", "/pay/createQRCode?text=" +
                                                encodeURIComponent(result.message.qrCode) + "&_=" + new Date().getTime());
                    $("img.qrcode").css("display", "");
	                /* 开始轮询订单是否成功支付 实际使用中建议使用WebSocket */
                    var intervalId = setInterval(function () {
	                    checkInvoiceStatus(result.message.noInvoice, intervalId);
                    }.bind(this), 2000)


                });
            });

            var checking = false;
            function checkInvoiceStatus(noInvoice, intervalId) {
                if(checking) {
                	return;
                }
	            checking = true;
	            $.post('/pay/checkInvoice', { noInvoice: noInvoice }, function(result){
                    console.log(result)
                    if(result.status === true && result.message === true) {
                        displayMessageBar(true,  "您成功支付了订单!")
                        window.location.href = "http://localhost:8080/index/cart"; 
                        $("div.ui.action.input").css("display", "");
                        $("img.qrcode").css("display", "none");
                        $('#invoiceAmount').val("");
                        clearInterval(intervalId);
                    }

		            checking = false;
	            });
            }

            function displayMessageBar(display, message) {
                if(message != undefined) {
                    $('div.ui.green.message > p').html(message);
                }
                $('div.ui.green.message').css("display", display ? "" : "none")
            }

            function displayMessage(message) {
	            $('div.top-message > div > span').html(message);
                $('div.top-message').addClass("top-message-display");
                setTimeout(function () {
	                $('div.top-message').removeClass("top-message-display");
                }, 1800);
            }
        </script>
    </body>
</html>